<template>
  <el-dialog
    class="dialog"
    :visible.sync="_visible"
    :title="
      editType === 'show'
        ? $t('vehicle_detail_info')
        : editType === 'add'
        ? $t('face_rl_addTitle')
        : $t('edit')
    "
    :append-to-body="true"
    width="600px"
    :before-close="handleClose"
  >
    <div class="content d-flex jc-center ai-center">
      <el-form
        :rules="rules"
        :model="formData"
        label-width="150px"
        class="flex-1 form"
      >
        <el-form-item :label="$t('vehicle_number') + ':'" prop="vehicle_number">
          <span v-if="editType === 'show'">{{ formData.vehicle_number }}</span>
          <el-input v-else v-model="formData.vehicle_number" />
        </el-form-item>
        <el-form-item :label="$t('vehicle_color') + ':'" prop="vehicle_color">
          <span v-if="editType === 'show'">{{ formData.vehicle_color }}</span>
          <el-input v-else v-model="formData.vehicle_color" />
        </el-form-item>
        <el-form-item :label="$t('vehicle_class') + ':'" prop="vehicle_type">
          <span v-if="editType === 'show'">{{ formData.vehicle_type }}</span>
          <el-input v-else v-model="formData.vehicle_type" />
        </el-form-item>
        <el-form-item :label="$t('vehicle_brand') + ':'" prop="vehicle_brand">
          <span v-if="editType === 'show'">{{ formData.vehicle_brand }}</span>
          <el-input v-else v-model="formData.vehicle_brand" />
        </el-form-item>
        <el-form-item
          :label="$t('vehicle_person_name') + ':'"
          prop="owner_name"
        >
          <span v-if="editType === 'show'">{{ formData.owner_name }}</span>
          <el-input v-else v-model="formData.owner_name" />
        </el-form-item>
        <el-form-item
          :label="$t('vehicle_pe_gender') + ':'"
          prop="owner_gender"
        >
          <span v-if="editType === 'show'">{{
            formData.owner_gender | formatGender
          }}</span>
          <el-select v-else v-model="formData.owner_gender">
            <el-option
              v-for="item in genderList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('vehicle_pe_age') + ':'" prop="owner_age">
          <span v-if="editType === 'show'">{{ formData.owner_age }}</span>
          <el-input v-else v-model="formData.owner_age" />
        </el-form-item>
        <el-form-item :label="$t('vehicle_vip_if') + ':'" prop="is_vip">
          <span v-if="editType === 'show'">{{
            formatVip(formData.is_vip)
          }}</span>
          <el-checkbox
            v-else
            v-model="formData.is_vip"
            :true-label="1"
            :false-label="0"
          ></el-checkbox>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <MyButton
        v-if="editType === 'show'"
        class="delete"
        @click="handleDelete"
        >{{ $t("common.delete") }}</MyButton
      >
      <MyButton class="cancel" @click="handleCancelEdit">{{
        $t("cancel")
      }}</MyButton>
      <MyButton
        v-if="editType !== 'show'"
        class="confirm"
        @click="handleConfirm"
        >{{ $t("save") }}</MyButton
      >
    </div>
  </el-dialog>
</template>
<script>
import { genderList } from "@/utils/CONSTANT";
import MyImg from "@/components/Image.vue";
import MyButton from "@/components/Button.vue";
import util from "@/utils";
import { deleteSingle, editSave, addSave } from "./service";
export default {
  components: {
    MyImg,
    MyButton,
  },
  props: {
    lib_id: {
      type: [String, Number],
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: () => {
        return {};
      },
    },
    editType: {
      type: String,
      default: "show",
    },
  },
  watch: {
    row: {
      handler(val) {
        if (val) {
          this.$set(this, "formData", JSON.parse(JSON.stringify(val)));
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    _visible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  data() {
    return {
      formData: {},
      genderList,
      rules: {
        owner_age: [
          {
            pattern: /^([0-9]|[1-9][0-9]|[1-9][0-9][0-9])$/,
            trigger: "change",
            message: this.$t("targets.age_rule"),
          },
        ],
      },
    };
  },
  methods: {
    handleDelete() {
      util.confirm(
        this.$t("vehicle_del_detail"),
        this.$t("vehicle_del_notice"),
        this.$t("common.deleteConfirm"),
        this.$t("common.cancel"),
        async () => {
          await deleteSingle({
            lib_id: this.lib_id,
            vehicle_number: this.formData.vehicle_number,
          });
          this.cancel();
          this.$emit("refresh");
        }
      );
    },
    handleCancelEdit() {
      this.cancel();
    },
    cancel() {
      this._visible = false;
      this.formData = {};
    },
    handleClose(done) {
      this.cancel();
      done();
    },
    formatVip(isVip) {
      return isVip ? this.$t("vehicle_vip_yes") : this.$t("vehicle_vip_no");
    },
    async handleConfirm() {
      const params = {
        ...this.formData,
        lib_id: this.lib_id,
      };
      let res;
      if (this.editType === "add") {
        res = await addSave(params);
      } else {
        res = await editSave(params);
      }
      if (res.code == 0) {
        util.msg.success("edit_success");
        this.cancel();
        this.$emit("refresh");
      }
    },
  },
};
</script>
<style lang="less" scoped>
.dialog {
  z-index: 9999;
  .content {
    width: 100%;
    /deep/ .el-form {
      width: 100%;
      // .el-form-item {
      //   margin-bottom: 10px;
      // }
      .el-select {
        width: 100%;
      }
    }
  }
  .eye {
    width: 20px;
    height: 10px;
    margin-left: 10px;
    background: url("../../assets/eye.png") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }
}
</style>
